<template>
	<view id="orderCenterPage">
		<view class="tab-switch">
			<view class="tab" v-for="(item,index) in tabs" :key="item.key" :class="{'active': active === index}" @click="tabSwitch(index)">
				{{item.value}}
			</view>
		</view>
		<view class="orders-wrapper">
			<view class="order-item" v-for="(item,index) in list" :key="item.id" @click="toOrderDetail(item.status)">
				<view class="order-title">
					<view class="order-no">
						订单号：{{item.no}}
					</view>
					<view class="order-status">
						<text>{{item.status}}</text>
						<image class="order-arrow" src="../../static/img/arrow-red.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="order-con">
					<view class="order-time">
						{{item.time}}
					</view>
					<view class="order-total">
						<text class="total-txt ">合计：</text>
						￥{{item.total}}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import { tabs, orders } from '../../utils/data.js'
	export default {
		components: {uniNumberBox},
		data() {
			return {
				tabs,
				active: 0,
				list:  orders
			}
		},
		
		methods: {
			
			
			tabSwitch(i) {
				this.active = i
				if (i === 0) {
					this.list = orders
					return
				}
				
				let tab = tabs[i].value
					
				this.list = orders.filter(item => item.status == tab)
				
			},
			toOrderDetail(status) {
				let type = tabs.find(item => item.value == status).key
				uni.navigateTo({
					url: '../orderDetail/orderDetail?type=' + type,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		// onLoad(opt) {
		// 	this.active = opt.active * 1
		// }
	}
</script>

<style>
.tab-switch {
	height: 71upx;
	background: #FFFFFF;
	display: flex;
}
.tab {
	flex: 1;
	font-size:28upx;
	font-weight:500;
	color:rgba(34,34,34,1);
	text-align: center;
	line-height: 71upx;
	position: relative;
}
.active {
	color: #EA0A2A;
}
.active:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -42upx;
	width:84upx;
	height:2upx;
	background:rgba(234,10,42,1);
}
.orders-wrapper {
	position: absolute;
	top: 71upx;
	left: 0;
	right: 0;
	bottom: 108upx;
	z-index: 13;
	overflow-y: auto;
	overflow-x: hidden;
}
.order-item {
	padding: 29upx 28upx 34upx 30upx;
	border: 1upx solid #F7F7F7;
}
.order-title {
	display: flex;
	justify-content: space-between;
	font-size:26upx;
	font-weight:500;
	color:rgba(51,51,51,1);
}
.order-status {
	color: #EA0A2A;
	font-size: 22upx;
}
.order-arrow {
	width: 13upx;
	height: 27upx;
	margin-left: 28upx;
}
.order-con {
	display: flex;
	justify-content: space-between;
	margin-top: 33upx;
}
.order-time {
	font-size:24upx;
	font-weight:400;
	color:rgba(153,153,153,1);
}
.order-total {
	font-size:28upx;
	font-weight:400;
	color:rgba(102,102,102,1);
}
.total-txt {
	color: #666666;
}
</style>
